<template>
  <view class="container screen-width">
    <view class="search-input flex items-middle">
      <input type="text" v-model="params.companyName" placeholder="请输入公司名称" />
      <view class="search-btn" @click="getSearchList">搜索</view>
    </view>
    <scroll-view class="list" :scroll-y="true" @scrolltolower="fetchData()">
      <view
        v-for="(item, index) in list"
        :key="item.id"
        class="company-content flex items-middle space-between"
      >
        <view class="item flex" @click="toDetail(item.companyId)">
          <img :src="getImageUrl(item.companyLogo)" />
          <view class="info">
            <view class="title">{{ item.companyName }}</view>
            <view class="date">{{ item.synopsis || '--' }}</view>
          </view>
        </view>
      </view>
      <u-loadmore
        bg-color="#ffffff"
        style="width: 100%;  margin-top: 15rpx;  padding-right: 30rpx"
        :status="status"
      />
    </scroll-view>
    <!-- 按钮 -->
    <view class="bottom-btn screen-width" @click="toAdd">添加企业名片</view>
    <Festival></Festival>
  </view>
</template>

<script>
import { getSerivice } from "../../util/api/index.js";
import { getImage } from "@/util/getImage.js";
export default {
  data() {
    return {
      total: 0,
      current: -1,
      list: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        companyName: ""
      },
      status: "loadmore",
      companyId: ""
    };
  },
  onShow() {
    this.fetchData(true);
  },
  methods: {
    getImageUrl(url) {
      return getImage(url);
    },
    // 去企业微官网
    toWebsite() {
      if (this.companyId) {
        uni.navigateTo({
          url: `/pages/companyWeb/Index?companyId=${this.companyId}`
        });
      } else {
        uni.showToast({
          title: "请先选择您想查看的公司",
          duration: 2000,
          icon: "none"
        });
      }
    },
    getSearchList() {
      this.params.pageNo = 1;
      this.fetchData(true);
    },
    fetchData(reset) {
      if (reset) {
        this.resetPagination();
      }
      uni.showLoading();
      this.status = "loading";
      getSerivice(this.params).then(res => {
        uni.hideLoading();
        this.$nextTick(() => {
          let { records } = res.result;
          this.total = res.result.total;
          if (!records.length) {
            this.status = "nomore";
            return;
          }
          this.list = reset ? records : this.list.concat(records);
          this.params.pageNo++;
          this.status = "loadmore";
        });
      });
    },
    resetPagination() {
      this.params.pageNo = 1;
      this.list = [];
      this.status = "loadmore";
    },
    toDetail(id) {
      uni.navigateTo({
        url: `/pages/companyWeb/detail?companyId=${id}`
      });
    },
    toAdd() {
      let token = this.$getToken();
      if (!token) {
        uni.showToast({
          title: "您还没有登录，请登录后操作",
          duration: 2000,
          icon: "none"
        });
        setTimeout(() => {
          uni.setStorageSync("pageUrl", window.location.href);
          uni.navigateTo({
            url: "/pages/login/index"
          });
        }, 2000);
      } else {
        uni.navigateTo({
          url: `/pages/companyWeb/add`
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  max-height: 100%;
  .search-input {
    // height: 100rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 26rpx;
    input {
      width: 500rpx;
      border: 1rpx solid #eee;
      border-radius: 10rpx;
      padding: 0 20rpx;
      height: 80rpx;
    }
    .search-btn {
      margin-left: 15rpx;
      background: #1678ff;
      color: #fff;
      border-radius: 10rpx;
      padding: 20rpx 20rpx;
    }
  }
  .list {
    height: calc(100% - 140rpx);
    width: 100%;
    background: #fff;
    padding: 0 30rpx 100rpx 30rpx;
    box-sizing: border-box;
    .company-content {
      border-bottom: 1rpx solid #ebebeb;
      padding: 20rpx 0;
      box-sizing: border-box;
    }
    .item {
      height: 200rpx;
      img {
        width: 140rpx;
        height: 150rpx;
        margin-right: 20rpx;
      }
      .info {
        width: 75%;
      }
      .title {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        margin-bottom: 20rpx;
      }
      .date {
        font-size: 24rpx;
        line-height: 40rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #aaaaaa;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; //限制行数
        overflow: hidden; //超出部分隐藏
        text-overflow: ellipsis;
      }
      .sub-cancel {
        width: 120rpx;
        height: 48rpx;
        opacity: 1;
        background: #e8f3ff;
        border-radius: 8rpx;
        color: #1678ff;
        line-height: 48rpx;
        text-align: center;
      }
    }
    .no-pass {
      font-size: 12px;
      color: #aaaaaa;
    }
  }
  .bottom-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 25upx 0;
    text-align: center;
    background: #1678ff;
    color: white;
    font-size: 16px;
  }
}
</style>
